<template>
	<div id="box">
		<nav-bar class="nav-bar">
			<template v-slot:center>
				个人中心
			</template>
		</nav-bar>
		
		<div class="user-box" @click="userClick">
			<div class="user-info">
				<div class="info">
					<img src="~images/bajie.jpg" alt="avatar"/>
					<div class="user-desc">
						<span>昵称：</span>
						<span>登录名：</span>
						<span class="name">个性签名：做一只有理想的猪</span>
					</div>
				</div>
			</div>
			
			<ul class="user-list">
				<li class="van-hairline--bottom">
					<span>我的收藏</span>
					<van-icon name="arrow"/>
				</li>
				<li class="van-hairline--bottom">
					<span>我的订单</span>
					<van-icon name="arrow"/>
				</li>
				<li class="van-hairline--bottom">
					<span>账号管理</span>
					<van-icon name="arrow"/>
				</li>
				<li class="van-hairline--bottom">
					<span>地址管理</span>
					<van-icon name="arrow"/>
				</li>
				<li class="van-hairline--bottom">
					<span>关于我们</span>
					<van-icon name="arrow"/>
				</li>
			</ul>
		</div>
		
		<div style="margin: 16px;">
			<van-button round block color="#42b983">退出登录</van-button>
		</div>
	</div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar";
import {useRouter} from 'vue-router'
export default {
	name: "Profile",
	components: {
		NavBar
	},
	setup() {
		const router=useRouter() // 路由
		// 跳转到登录界面
		const userClick = () => {
			router.push('/login')
		}
		return {
			userClick
		}
	}
}
</script>

<style scoped>
#box {
	
	background: #FCFCFC;
	height: 80vh;
}

.user-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 44px;
	line-height: 44px;
	padding: 0 10px;
	color: #252525;
	background: #fff;
	border-bottom: 1px solid #dcdcdc;
}

.user-box {
	
	margin-top: 65px;
	
	
}

.user-name {
	font-size: 14px;
}

.info {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	
}

.user-info {
	width: 94%;
	margin: 10px;
	height: 115px;
	background: linear-gradient(90deg, #31c7A7, #A1c7c7);
	box-shadow: 0 2px 5px #269090;
	border-radius: 6px;
	margin-top: 50px;
	text-align: left;
	
}

.info img {
	width: 60px!important;
	height: auto;
	border-radius: 50%;
	margin-top: 4px;
}

.user-desc {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	margin-left: 40px;
	line-height: 20px;
	font-size: 14px;
	color: #fff;
	
}

span {
	color: #252525;
	font-size: 14px;
	padding: 2px 0;
}

.account-setting {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 13px;
	color: #fff;
	
}

.user-list {
	
	padding: 0 8px;
	margin-top: 20px;
	
}

li {
	padding-left: 5px;
	padding-right: 5px;
	height: 40px;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	
	/*margin: 10px 0 !important;*/
	background: lightgray;
	border-radius: 3px;
	z-index: 18;
}

.van-icon-arrow {
	margin-top: 13px;
}

.van-icon-setting-o {
	font-size: 16px;
	vertical-align: -3px;
	margin-right: 4px;
}
</style>